<template>
    <div class="container">
        <div class="box">
            <el-select id="select" style="width: 50%" v-model="region" placeholder="请选择需要查看公司地区">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <div>
                <el-button type="primary" round @click="research">查 找</el-button>
                <el-button type="danger" round @click="addDialogVisible = true">添加部门</el-button>
            </div>

        </div>
        <div>
            <el-table
                    :data="tableData_Post"
                    style="width: 100%"
                    :default-sort = "{prop: 'time', order: 'descending'}">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="部门下辖职位" label-width="200px">
                                <span>{{ props.row.stations }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="departmentName"
                        label="部门名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="region"
                        label="部门位置"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="departmentHeadName"
                        label="部门负责人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="departmentFunction"
                        label="部门职能"
                        width="180">
                </el-table-column>
                <el-table-column align="right">
                    <template slot-scope="scope">
                        <el-button @click="delete_Department(scope.row.department_id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--       添加部门-->
        <el-dialog title="添加部门" :visible.sync="addDialogVisible" width="40%">
            <el-form ref="add_form_ref" :model="add_department_form" >
                <el-form-item label="添加部门名称">
                    <el-col :span="18">
                        <el-input placeholder="请输入部门名称" v-model="add_department_form.department_name" maxlength="20"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="添加部门职能  ">
                    <el-col :span="18">
                        <el-input placeholder="请输入部门名称" v-model="add_department_form.department_function" maxlength="50"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="部门所属地区">
                    <el-select id="select" style="width: 50%" v-model="add_department_form.region" placeholder="选择部门所属地区">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add_new_Department">添 加</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<style>
    .container .box {
        float: top;
    }
    .box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
</style>

<script>
    export default {
        data() {
            return {
                tableData_Post:[],
                options: [],
                region: '',
                addDialogVisible: false,
                add_department_form: {
                    department_name: '',
                    department_function: '',
                    region: ''

                }
            }
        },
        methods: {
            //根据地区查找
            research() {
                console.log(this.region)
                let data = {"token": this.$store.state.token, 'region': this.region}
                this.$http.post('/getDepartmentInfo',data).then( res => {
                    this.tableData_Post = res.data.data
                })
            },
            //添加操作
            add_new_Department() {
                //    首先判断数据是否符合要求，不符合则不发送
                console.log(this.add_department_form.region)
                if(this.add_department_form.region === '' || this.add_department_form.region === 'non_choice') {
                    this.$message.error('请选择一个部门所在地区或正确填写负责人工号')
                }
                else {
                    let data = {
                        "token": this.$store.state.token,
                        'add_form': this.add_department_form
                    }
                    this.$http.post('/addDepartment', data).then( res =>{
                        console.log(res)
                        if(res.data.code === 200 ) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                            this.addDialogVisible = false
                            this.fetch()
                        }
                        else if (res.data.code === 403 && res.data.type === 'addDepartment_exist') {
                            this.$message.error('该部门已经存在')
                        }
                        else if (res.data.code === 403 && res.data.type === 'non_access') {
                            this.$message.error('没有添加权限')
                        }

                        else {
                            this.$message.error('发生未知错误')
                        }
                    })
                }
            },
            //删除部门
            delete_Department(id) {
                // console.log(id)
                let data = {"token": this.$store.state.token, 'department_id': id}
                this.$http.post('/deleteDepartment', data).then( res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.fetch()
                    }
                    else if (res.data.code === 403) {
                        this.$message.error('没有删除权限')
                    }
                    else {
                        this.$message.error('未知错误')
                    }
                })
            },

            //渲染数据
            fetch(){
                console.log('this_token=',this.$store.state.token)
                let data = {"token": this.$store.state.token, 'region': null}
                this.$http.post('/getDepartmentInfo', data).then( res => {

                    this.tableData_Post = res.data.data
                    this.options = res.data.options
                })
            }
        },
        created() {
            this.fetch()
        }
    }
</script>
